<template>
  <!-- 城市列表 -->
  <div>
    <better-scroll class="city-list" ref="scroll" :data="hotList" :listen-scroll="true" :pull-up="true" :pull-down="true" @scroll="scroll" @pullUp="loadData()" @pullDown="refreshData()">
      <div>
        <!-- 当前城市 -->
        <div class="area">
          <div class="title border-t border-b">当前城市</div>
          <div class="button-list overflow-hidden">
            <div class="button-wrap w-1/3 float-left">
              <div class="button box-border">{{ currentCity }}</div>
            </div>
          </div>
        </div>
        <!-- 热门城市 -->
        <div class="area">
          <div class="title border-t border-b">热门城市</div>
          <div class="button-list overflow-hidden">
            <div class="button-wrap w-1/3 float-left" v-for="(item, index) in hotList" :key="index" @click="handleCity(item.name)">
              <div class="button box-border">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <!-- 城市列表 -->
        <div :ref="key" class="area" v-for="(value, key) in list" :key="key">
          <div class="title border-t border-b">{{ key }}</div>
          <div class="item-list">
            <div class="item border-b" v-for="item in value" :key="item.id" @click="handleCity(item.name)">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </better-scroll>
    <!-- 回到顶部 -->
    <back-top @click.native="goTop" v-show="showBackTop"></back-top>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import BetterScroll from '@/components/BetterScroll/BetterScroll.vue'
import BackTop from '@/components/BackTop/BackTop.vue'
export default {
  components: {
    BetterScroll,
    BackTop,
  },
  props: {
    list: [Object, Array],
    hotList: Array,
    letter: String,
  },
  data() {
    return {
      showBackTop: false,
    }
  },
  computed: {
    ...mapState({ currentCity: 'city' }),
  },
  watch: {
    // 监听当前字母
    letter() {
      if (this.letter) {
        // 获取标识元素
        const el = this.$refs[this.letter][0]
        // 滚动到该元素
        this.$refs.scroll.scrollToElement(el)
      }
    },
  },
  methods: {
    ...mapActions(['changeCity']),
    // 刷新数据
    refreshData() {
      console.log('刷新数据')
    },
    // 加载更多
    loadData() {
      console.log('加载更多')
    },
    // 回到顶部
    goTop() {
      this.$refs.scroll.scrollTo(0, 0, 1000)
    },
    // 内容滚动
    scroll(position) {
      // 决定backTop是否显示
      this.showBackTop = position.y < -300
    },
    // 选择城市
    handleCity(city) {
      // this.$store.dispatch('changeCity', city)
      this.changeCity(city)
      this.$router.push({ path: '/' })
    },
  },
}
</script>

<style lang="scss" scoped>
.city-list {
  // 预留头部和搜索栏高度
  position: absolute;
  top: 0.83rem;
  left: 0;
  right: 0;
  bottom: 0;
  // 溢出隐藏内容
  overflow: hidden;
  .area {
    .title {
      line-height: 0.27rem;
      background: #eee;
      padding-left: 0.1rem;
      color: #666;
      font-size: 0.13rem;
    }
    .button-list {
      padding: 0.05rem 0.3rem 0.05rem 0.05rem;
      .button-wrap {
        .button {
          padding: 0.03rem;
          margin: 0.05rem;
          border-radius: 0.03rem;
          text-align: center;
          border: 0.01rem solid #ccc;
        }
      }
    }
    .item-list {
      .item {
        line-height: 0.38rem;
        color: #666;
        padding-left: 0.1rem;
      }
    }
  }
}
</style>
